import {View, Button, Text, Image} from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, {Component} from 'react';
import * as T from '../types';
import './centerBox.less';
import actions from '../actions/index';
import {connect} from 'react-redux';
import {store2Props} from '../selectors';
import 'taro-ui/dist/style/components/icon.scss';
import refund from '@/assets/image/my/refund.png';
import evaluation from '@/assets/image/my/evaluation.png';
import getIcon from '@/assets/image/my/get.png';
import sendIcon from '@/assets/image/my/send.png';
import payIcon from '@/assets/image/my/pay.png';
import rightIcon from '@/assets/image/index/right.png';
import {WMkit} from 'wmkit';

const orderData = [
  {
    title: '待付款',
    img: payIcon,
    status: 'payState-NOT_PAID',
  },
  {
    title: '待发货',
    img: sendIcon,
    status: 'flowState-AUDIT',
  },
  {
    title: '待收货',
    img: getIcon,
    status: 'flowState-DELIVERED',
  },
  {
    title: '待评价',
    img: evaluation,
    status: 'evaluate',
  },
  {
    title: '退货/退款',
    img: refund,
    status: 'refund',
  },
];

type ICenterBoxProps = T.IProps & T.ICenterBoxProps;
//@ts-ignore
@connect<Partial<ICenterBoxProps>, T.ICenterBoxState>(store2Props, actions)
export default class Info extends Component<Partial<ICenterBoxProps>, T.ICenterBoxState> {
  constructor(props: ICenterBoxProps) {
    super(props);
  }

  // 工具栏
  getToolsBox(listData) {
    let toolsView = [];
    listData.map((item, index) => {
      toolsView.push(
        <View
          className="item"
          onClick={() => {
            this.goToOrderPage(item.status);
          }}
        >
          <Image className="img" src={item.img} mode="widthFix" />
          <Text className="title">{item.title}</Text>
          {this.getBadgeNum(index) > 0 && (
            <View className="badge">
              <Text className="badgeValue">{this.getBadgeNum(index)}</Text>
            </View>
          )}
        </View>,
      );
    });
    return toolsView;
  }

  getBadgeNum(index) {
    let {
      main: {orderCount},
    } = this.props;
    switch (index) {
      case 0:
        return orderCount.waitPay;
      case 1:
        return orderCount.waitDeliver;
      case 2:
        return orderCount.waitReceiving;
      case 3:
        return orderCount.waitEvaluate;
      case 4:
        return orderCount.refund;
      default:
        return null;
    }
  }

  goToOrderPage(status) {
    let {
      actions: {action},
    } = this.props;
    if (!WMkit.isLogin()) {
      Taro.navigateTo({
        url: '/pages/package-C/login/login/index',
      });
    }
    if (Taro.getStorageSync('blacklistModel')) {
      action.commonChange('main.blacklistModel', true);
      return;
    }
    let appUrl = '';
    if (status == 'evaluate') {
      // 待评价
      appUrl = '/pages/package-A/customer/evaluate-center/index';
    } else if (status == 'refund') {
      // 退款/退货
      appUrl = '/pages/package-C/order/refund-list/index';
    } else if (status == 'all') {
      // 全部订单
      appUrl = '/pages/package-C/order/order-list/index';
    } else {
      // 待付款、待发货、待收货
      appUrl = '/pages/package-C/order/order-list/index?status=' + status;
    }
    Taro.setStorageSync('order_list_tab', {status: status});
    Taro.navigateTo({
      url: appUrl,
    });
  }

  render() {
    let {
      main,
      actions: {action},
    } = this.props;
    return (
      <View className="PageUserCenterBox">
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            padding: '15rpx 30rpx',
          }}
        >
          <Text style={{color: '#333333', fontSize: '32rpx'}}>我的订单</Text>
          <View
            onClick={() => {
              this.goToOrderPage('all');
            }}
          >
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <Text
                style={{
                  letterSpacing: '2rpx',
                  color: '#999999',
                  fontSize: '24rpx',
                }}
              >
                全部订单
              </Text>
              <Image className="r_img" mode="widthFix" src={rightIcon} />
            </View>
          </View>
        </View>
        <View className="orderBox">{this.getToolsBox(orderData)}</View>
      </View>
    );
  }
}

//create by moon https://github.com/creasy2010/moon
